// import type { ColumnChangeParam, TableSetting } from "../../types/table";
import type { TableSetting } from "../../types/table";
// import { useTableContext } from "../../hooks/useTableContext";
// import ColumnSetting from "./ColumnSetting.vue";
// import FormSetting from "./FormSetting.vue";
// import SizeSetting from "./SizeSetting.vue";
import RedoSetting from "./RedoSetting";
import { useMemo } from "react";
// import FullScreenSetting from "./FullScreenSetting.vue";
import "../../style/TableSettings.less";

interface TableSettingPropsType {
	setting?: TableSetting;
}

export default function TableSetting(props: TableSettingPropsType = { setting: {} }) {
	// const table = useTableContext();

	const getSetting = useMemo((): TableSetting => {
		return {
			redo: true,
			form: true,
			size: true,
			setting: true,
			fullScreen: false,
			...props.setting
		};
	}, [props.setting]);

	// function handleColumnChange(data: ColumnChangeParam[]) {
	// 	emit("columns-change", data);
	// }

	// function getTableContainer() {
	// 	return table ? table.wrapRef : document.body;
	// }

	return (
		<div className="table-settings">
			{/* {getSetting.redo && <RedoSetting getPopupContainer={getTableContainer} />} */}
			{getSetting.redo && <RedoSetting />}
			{/* <FormSetting v-if="getSetting.form" :get-popup-container="getTableContainer" /> */}
			{/* <SizeSetting v-if="getSetting.size" :get-popup-container="getTableContainer" /> */}
			{/* <ColumnSetting
      v-if="getSetting.setting"
      :get-popup-container="getTableContainer"
      @columns-change="handleColumnChange"
    /> */}
			{/* <FullScreenSetting v-if="getSetting.fullScreen" :get-popup-container="getTableContainer" /> */}
		</div>
	);
}
